<template>
  <page-layout :title="role.name">
    <div slot="headerContent">{{role.memo}}</div>
    <template slot="extra">
      <a-space :size="size">
        <a-button type="primary" v-if="role.enableIf" @click="onAdd">
          <a-icon type="plus" />添加人员
        </a-button>
        <a-button @click="onEdit">
          <a-icon type="edit" />编辑角色
        </a-button>
        <a-popconfirm title="确定要删除该角色吗?" ok-text="确定" cancel-text="取消" @confirm="onConfirmDelete">
          <a-button>
            <a-icon type="delete" />删除角色
          </a-button>
        </a-popconfirm>
      </a-space>
    </template>
    <detail :pageData="pageData" :columns="columns" :dataSource="dataSource" :checkedKeys="checkedKeys" @confirmDelete="onDelete" :page="pageNum" :pageSize="pageSize" :total="total" @pageChange="onPageChange" @sizeChange="onSizeChange" @checked-key="getCheckedKeys" @suer-permission="getSurePermission"></detail>
    <!-- 新建角色Modal -->
    <editRole :isNewRole="false" :isRoleModal="isRoleModal" @cancelModal="onCancel" :role="role"></editRole>
    <!-- 添加成员Modal -->
    <addMember :memberModal="isMemberModal" @cancelModal="onCancel" :roleName="role.name"></addMember>
  </page-layout>
</template>

<script>
import Detail from "@/pages/owns/Detail";
import PageLayout from "@/layouts/PageLayout";
import editRole from "@/pages/owns/EditRoleModal";
import addMember from "@/pages/owns/addMemberModal";
import { updateRole, permissionTree, deleteRole, rolePermission, roleUser, removeUser, addMemeber } from '@/services/role'
export default {
  name: "characterDetails",
  components: { Detail, PageLayout, editRole, addMember },
  data () {
    return {
      pageData: [],
      columns: [
        {
          title: "姓名",
          dataIndex: "name"
        },
        {
          title: "部门",
          dataIndex: "deptNames"
        },
        {
          title: "添加时间",
          dataIndex: "createTime"
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" }
        }
      ],
      dataSource: [],
      size: 15,
      isRoleModal: false,
      isMemberModal: false,
      isDeleteModal: false,
      // 新增角色无id   修改角色有id
      addRoleState: {
        id: "",
        name: "",
        enableIf: "",
        memo: ""
      },
      role: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      checkedKeys: []
    };
  },
  watch: {
    $route: {
      handler (to) {
        const role = to.query.role;
        this.role = role;
      },
      immediate: true
    }
  },
  methods: {
    onAdd () {
      this.isMemberModal = true;
    },
    onEdit () {
      this.isRoleModal = true;
    },
    onCancel (data) {
      if (data.modal == "添加人员") {
        if (data.success == "ok") {
          let params = {
            roleId: this.role.id, // this.role.id
            userIds: data.data.memberList.toString(),
            status: 0
          }
          addMemeber(params).then(res => {
            console.log(res);
          })
        }
        this.isMemberModal = false;
      } else if (data.modal == "新建角色") {
        if (data.success == "ok") {
          this.addRoleState.enableIf = data.data.status;
          this.addRoleState.name = data.data.name;
          this.addRoleState.memo = data.data.note;
          this.addRoleState.id = this.role.id;
          this.editRole(this.addRoleState);
        }
        this.isRoleModal = false;
      }
    },
    onDelete (data) {
      let user;
      if (typeof data === "object") {
        data.forEach(el => {
          this.dataSource = this.dataSource.filter(val => val.id != el);
        })
        user = data.toString()
      } else {
        this.dataSource = this.dataSource.filter(val => val.id != data)
        user = data
      }
      let params = {
        roleId: this.role.id,// this.role.id
        userIds: user,
        memo: this.role.memo,
        status: 1
      }
      removeUser(params).then(res => {
        console.log(res);
      })
    },
    getCheckedKeys (data) {
      this.checkedKeys = data;
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (data) {
      this.pageNum = data.page
      this.pageSize = data.pageSize
    },
    onSizeChange (data) {
      this.pageNum = 1
      this.pageSize = data.size
    },
    onConfirmDelete () {
      deleteRole({ id: this.role.id }).then(res => {
        if (res.data.code == 200) {
          console.log(res.data.msg)
        }
      })
    },
    editRole (params) {
      updateRole(params).then(res => {
        if (res.data.code == 400) {
          console.log(res.data.msg)
        }
      })
    },
    getPermission () {
      permissionTree().then(res => {
        if (res.data.code == 200) {
          this.pageData = res.data.data;
        }
      })
    },
    getRolePermission () {
      // console.log({ id: this.role.id });
      rolePermission({ id: this.role.id }).then(res => {
        if (res.data.code == 200) {
          const data = res.data.data;
          const list = data.split(',').map(Number);
          this.checkedKeys = list
        }
      })
    },
    getRoleUser () {
      let params = {
        id: this.role.id,// this.role.id
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      roleUser(params).then(res => {
        if (res.data.code == 200) {
          const data = res.data.data;
          this.dataSource = data.content;
          this.total = data.totalElements;
        }
      })
    },
    getSurePermission (data) {
      if (data) {
        let params = {
          roleId:this.role.id,
          authorityIds: this.checkedKeys.toString(),
          status: 2
        }
        addMemeber(params).then(res => {
          if (res.data.code == 200) {
          console.log(res.data.data);
        }
        })
      }
    }
  },
  mounted () {
    this.getPermission();
    this.getRolePermission();
    this.getRoleUser()
  }
};
</script>

<style scoped lang="less">
</style>
